<template>
  <!-- svg 为使用根标签 图标大小放在svg 标签中-->
  <!-- svg得配合use标签使用 xlink:href属性值是：#icon-svg文件名，fill属性为图标颜色 -->
  <svg :style="{ 'width': width, 'height': height }" class="icon">
    <use :fill="color" :xlink:href="prefix + name" />
  </svg>
</template>

<script lang='ts' setup>
import { defineProps } from 'vue'
//接收父组件传来的参数
defineProps({
  // 接收父组件传来的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  // 接收父组件传来的svg文件名
  name: {
    type: String,
    default: 'default'
  },
  // 接收父组件传来的图标颜色
  color: {
    type: String,
    default: ''
  },
  // 接收父组件传来的图标宽度
  width: {
    type: String,
    default: '16px'
  },
  // 接收父组件传来的图标高度
  height: {
    type: String,
    default: '16px'
  },
  style: {
    type: String,
    default: ''
  },
})

</script>

<style lang="scss">
.icon {
  display: inline-block;
  vertical-align: middle;
}
</style>
